<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../styles/prod.scss";
.mid {
  line-height: 140px;
}
.basic-up {
  margin-top: 0 !important;
}
.basic-down {
  margin-bottom: 0 !important;
}
</style>

<template>
  <div class="app-container calendar-list-container" v-if="detail.pdsCustomer.id">
    <!-- 基本属性 -->
    <div class="pds-tip-green">
      <p>
        客户种类：{{getValue(customerStatusOptions, 'id', (language=='en' ? 'labelEnUs':'labelZhCh'), detail.pdsCustomer.customerStatus)}}
      </p>
    </div>
    <custom-card title="基本信息" class="mt-30">
      <template>
        <basic-form :basicInfo="basicForm_pre" :detail="detail.pdsCustomer" ref="basicForm" class="basic-down"></basic-form>
        <basic-form :basicInfo="basicForm_af" :detail="detail.pdsCustomerBasicInfo" ref="basicForm_basic" v-if="detail.pdsCustomer.customerStatus==2" class="basic-up"></basic-form>
        <custom-card title="联系人信息" class="mt-30">
          <template>
            <el-table class="" border fit highlight-current-row style="width: 100%" :data="detail.pdsCustomerContactsList">
              <el-table-column width="80px" align="center" label="序号" prop="" type="index"></el-table-column>
              <el-table-column align="center" label="姓名" prop="contactName">
              </el-table-column>
              <el-table-column align="center" label="职位">
                <template slot-scope="scope">
                  {{getValue(contactPositionOptions, 'id', (language=='en' ? 'labelEnUs':'labelZhCh'), scope.row.contactPosition)}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="电话" prop="contactPhone"> </el-table-column>
              <el-table-column align="center" label="邮箱" prop="contactEmail"></el-table-column>
            </el-table>
          </template>
        </custom-card>
      </template>
    </custom-card>
    <custom-card title="业务信息" class="mt-30" v-if="detail.pdsCustomer.customerStatus==2">
      <template>
        <basic-form :basicInfo="businessForm" :detail="detail.pdsCustomerBizInfo" ref="basicForm_biz"></basic-form>
        <custom-card title="主要产品信息" class="mt-30">
          <template>
            <el-table class="" border fit highlight-current-row style="width: 100%" :data="detail.pdsCustomerProductsList">
              <el-table-column width="80px" align="center" label="序号" type="index"></el-table-column>
              <el-table-column align="center" label="型号" prop="productModel"></el-table-column>
              <el-table-column align="center" label="主要规格" prop="productSpec"></el-table-column>
              <el-table-column align="center" label="品牌" prop="productBrand"></el-table-column>
              <el-table-column align="center" label="定位" prop="productPositioning"></el-table-column>
            </el-table>
          </template>
        </custom-card>
      </template>
    </custom-card>
    <custom-card title="合作条款" class="mt-30" v-if="detail.pdsCustomer.customerStatus==2">
      <template>
        <basic-form :basicInfo="conditionForm" :detail="detail.pdsCustomerTerms" ref="basicForm_terms"></basic-form>
      </template>
    </custom-card>
    <custom-card title="我方满足客户需求的能力" class="mt-30" v-if="detail.pdsCustomer.customerStatus==2">
      <template>
        <basic-form :basicInfo="abilityForm" :detail="detail.pdsCustomerOurAbility" ref="basicForm_ability"></basic-form>
      </template>
    </custom-card>
    <custom-card title="深入了解客户" class="mt-30" v-if="detail.pdsCustomer.customerStatus==2">
      <template>
        <basic-form :basicInfo="moreForm" :detail="detail.pdsCustomerDepthInfo" ref="basicForm_depth"></basic-form>
      </template>
    </custom-card>
    <custom-card title="客户评级" class="mt-30" v-if="detail.pdsCustomer.customerStatus==2">
      <template>
        <basic-form :basicInfo="levelForm" :detail="detail.pdsCustomerBasicInfo" ref="basicForm_rating"></basic-form>
      </template>
    </custom-card>
    <custom-card title="财务报表" class="mt-30" v-if="detail.pdsCustomer.customerStatus==2">
      <upload-list v-model="detail.financialStatementsDocList" :disable="true"></upload-list>
    </custom-card>
    <custom-card title="近期媒体报道" class="mt-30" v-if="detail.pdsCustomer.customerStatus==2">
      <upload-list v-model="detail.mediaCoverageDocList" :disable="true"></upload-list>
    </custom-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import BasicForm from '@/components/BasicForm/showDetail';
import UploadList from '@/components/UploadList/index';
import mixins from './mixins/pub';
export default {
  name: 'user',
  components: {
    BasicForm,
    UploadList
  },
  mixins: [mixins],
  data() {
    return {};
  },
  created() {
    this.getDict();
  },
  activated() {
    this.customerId = this.$route.query.customerId;
    this.getPdsCustomerDetail();
  },
  computed: {
    ...mapGetters(['elements', 'language'])
  },
  methods: {
    /* 单选值查询 */
    getValue(list, keyName, valueName, value) {
      let resStr = '';
      if (list) {
        list.map(item => {
          if (item[keyName] == value) {
            resStr = item[valueName];
          }
        });
      }
      return resStr;
    },
    /* 多选值查询 */
    getValues(list, keyName, valueName, valueList) {
      const resList = [];
      if (list) {
        list.map(item => {
          valueList.map(subItem => {
            if (item[keyName] == subItem) {
              resList.push(item[valueName]);
            }
          });
        });
      }
      return resList.join(',');
    }
  }
};
</script>
